<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,user-scalable=no">
  <link rel="stylesheet" href="./home.css">
  <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
  <meta name="HandheldFriendly" content="true">
  <link rel="stylesheet" href="./bootstrap.css">
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <title>首页</title>
</head>

<body>
  <div class="main">
    <!-- 顶部客服热线及右边三个小图标 -->
    <div class="top">
      <div class="header">
        <div class="call">客服热线：010-594-78643</div>
        <div class="open">
          <a class="wx" href="#"><img src="./img/weixin.png" alt=""></a>
          <a class="qq" href="#"><img src="./img/qq.png" alt=""></a>
          <a class="weibo" href="#"><img src="./img/weibo.png" alt=""></a>
        </div>
      </div>
        <!-- 登录和注册 -->
        <div class="lore">
          <span class="login">登录</span>
          <span class="register">注册</span>
        </div>

    </div>


    <!-- 导航部分 -->
    <div class="row navi">
      <a class="na-l" href="./home.html"><img src="./img/tree.png" alt=""></a>
      <div class="dropdown">
          <input type="checkbox" id="checkbox_toggle">
          <label for="checkbox_toggle"> 
          <div class="bar">
            <div class="sbar">
              <div class="bar1"></div>
              <div class="bar2"></div>
              <div class="bar3"></div>
            </div>
          </div>
        </label>
      <div class="na">  
        <div class="lead">
          <a href="./home.html">首页</a>
        </div>
        <div class="lead">
          <a href="./career.html">职业</a>
        </div>
        <div class="lead">
          <a href="#">推荐</a>
        </div>
        <div class="lead">
          <a href="#">关于</a>
        </div>
        
      </div>

      <!-- 当屏幕小于一定宽度时，出现导航按钮 -->
       
      </div>
    </div>

  <!-- 轮播图 -->
  <div class="carousel slide" id="carousel-873240">
    <ol class="carousel-indicators">
      <li class="active" data-slide-to="0" data-target="#carousel-873240">
      </li>
      <li data-slide-to="1" data-target="#carousel-873240">
      </li>
      <li data-slide-to="2" data-target="#carousel-873240">
      </li>
    </ol>
    <div class="carousel-inner">
      <div class="item active">
        <img alt="" src="./img/banner.png" />
      </div>
      <div class="item">
        <img alt="" src="./img/banner1.jpg" />
      </div>
      <div class="item">
        <img alt="" src="./img/banner2.jpg" />
      </div>
    </div>
    <a data-slide="prev" href="#carousel-873240" class="left carousel-control"><img src="./img/arrow-left.png" alt=""></a>
    <a data-slide="next" href="#carousel-873240" class="right carousel-control"><img src="./img/arrow-right.png" alt=""></a>
  </div>

  <!-- 高效、规范、人脉 -->
  <div class="bian">
    <div class="col-md-2">
        <img class="img" src="./img/rocket.png" alt="">
        <h3>高效</h3>  
      <p>将五到七年的成长时间，缩短到一年到三年。</p>
    </div>
    <div class="col-md-2">
        <img class="img" src="./img/archive.png" alt="">
        <h3>规范</h3>
      <p>标准的实战教程，不会走弯路,标准的实战教程，不会走弯路
      </p>
    </div>
    <div class="col-md-2 line">
        <img class="img" src="./img/social.png" alt="">
        <h3>人脉</h3>
      <p>同班好友，同院学长，技术大师，入学就混入职脉圈，为以后铺平道路。</p>
    </div>
    <div class="col-md-3 ren">
      <div class="renshu">
        <img src="./img/user.png" alt="">
        <span>12400</span>
      </div>
      <p>累计在线学习人数</p>
      <div class="renshu">
        <img src="./img/user.png" alt="">
        <span>12400</span>
      </div>
      <p>学员已经找到满意工作</p>
    </div>
  </div>

  <!-- 如何学习 -->
  <div class="study">
      <h3>如何学习</h3>
    <div class="col-md-2 sd">
      <li class="order">1</li>
      <li class="text sd">
        <span>匹配你现在的个人情况寻找适合自己的岗位</span>
      </li>
      <img class="img" src="./img/fly.png" alt="">
    </div>
    <div class="col-md-2 sd">
      <li class="order">2</li>
      <li class="text sd">
        <span>了解职业前景薪金待遇、竞争压力等</span>
      </li>
      <img class="img" src="./img/fly.png" alt="">
    </div>
    <div class="col-md-2 sd">
      <li class="order">3</li>
      <li class="text sd">
        <span>掌握行业内顶级技能</span>
      </li>
      <img class="img" src="./img/fly.png" alt="">
    </div>
    <div class="col-md-2 sd">
      <li class="order">4</li>
      <li class="text">
        <span>查看职业目标任务</span>
      </li>
    </div>

    <div class="col-md-2 sd">
      <li class="order">5</li>
      <li class="text sd">
        <span>参考学习资源，掌握技能点，逐个完成任务</span>
      </li>
      <img class="img" src="./img/fly.png" alt="">
    </div>
    <div class="col-md-2 sd">
      <li class="order">6</li>
      <li class="text sd">
        <span>加入班级，和小伙伴们互帮互助，一块学习</span>
      </li>
      <img class="img" src="./img/fly.png" alt="">
  </div>
    <div class="col-md-2 sd">
      <li class="order">7</li>
      <li class="text sd">
        <span>选择导师，一路引导，加速自己成长</span>
      </li>
      <img class="img" src="./img/fly.png" alt="">
    </div>
    <div class="col-md-2">
      <li class="order">8</li>
      <li class="text">
        <span>完成职业技能，升级业界大牛</span>
      </li>
    </div>
  </div>


  <!-- 优秀学员展示 -->
  <div class="student">
    <div class="col-md-12">
      <h3>优秀学员展示</h3>
    </div>
    <div class="col-md-2">
        <img src="./img/student.png" alt="">
        <h3>技术顾问：罗大佑</h3>
      <p>百度技术总监：互联网基础
        服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
    </div>

    <div class="col-md-2">
        <img src="./img/student.png" alt="">
        <h3>技术顾问：罗大佑</h3>
      <p>百度技术总监：互联网基础
        服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
    </div>
    <div class="col-md-2">
        <img src="./img/student.png" alt="">
        <h3>技术顾问：罗大佑</h3>
      <p>百度技术总监：互联网基础
        服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
    </div>
    <div class="col-md-2">
        <img src="./img/student.png" alt="">
        <h3>技术顾问：罗大佑</h3>
      <p>百度技术总监：互联网基础
        服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
    </div>
    <div class="col-md-2">
      <img src="./img/student.png" alt="">
      <h3>技术顾问：罗大佑</h3>
    <p>百度技术总监：互联网基础
      服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理与建设。</p>
  </div>
  </div>
  <!-- 换页小圆点 -->
  <div class="nextpage">
    <div class="pagination">
      <a href="#" class="active"><img src="./img/round2.png" alt=""></a>
      <a href="#" class="default"><img src="./img/round3.png" alt=""></a>
      <a href="#"><img src="./img/round3.png" alt=""></a>
      <a href="#"><img src="./img/round3.png" alt=""></a>
    </div>
  </div>

  <!-- 战略合作企业 -->
  <div class="partner">

    <h3>战略合作企业</h3>

    <div class="part">
      <a href="#"><img src="./img/alibaba.png" alt=""></a>
      <a href="#"><img src="./img/jinshan.png" alt=""></a>
      <a href="#"><img src="./img/huanxin.png" alt=""></a>
      <a href="#"><img src="./img/ronglian.png" alt=""></a>
      <a href="#"><img src="./img/qiniu.png" alt=""></a>
    </div>
  </div>

  <!-- 友情链接 -->
  <div class="flink">
    <h3>友情链接</h3>
    <ul>
      <li><a href="#">手机软件</a></li>
      <li><a href="#">教师招聘</a></li>
      <li><a href="#">手机软件</a></li>
      <li><a href="#">教师招聘</a></li>
      <li><a href="#">手机软件</a></li>
      <li><a href="#">教师招聘</a></li>
      <li><a href="#">手机软件</a></li>
      <li><a href="#">教师招聘</a></li>
      <li><a href="#">手机软件</a></li>
      <li><a href="#">教师招聘</a></li>
      <li><a href="#">手机软件</a></li>
      <li><a href="#">教师招聘</a></li>
      <li><a href="#">手机软件</a></li>
      <li><a href="#">教师招聘</a></li>
      <li><a href="#">手机软件</a></li>
      <li><a href="#">教师招聘</a></li>
      <li><a href="#">手机软件</a></li>
      <li><a href="#">教师招聘</a></li>
    </ul>
  </div>

  <!-- footer -->
  <div class="footer">
    <!-- 底部左边 -->
    <div class="col-md-4 left">
      <div>技能树 — 改变你我</div>
      <div class="text">
        <a href="#" class="al">关于我们</a>
        <a href="#" class="al">联系我们</a>
        <a href="./partner.html">合作企业</a>
      </div>
    </div>
    <!-- 底部中间 -->
    <div class="col-md-4 center">
      <div>旗下网站</div>
      <div class="link">
        <a href="#">草船云孵化器</a>
        <a href="#">最强IT特训营</a>
        <a href="#">葡萄藤轻游戏</a>
        <a href="#">桌游精灵</a>
      </div>
    </div>

    <!-- 底部右边 -->
    <div class="col-md-4 right">
      <div>微信公众平台</div>
      <div class="image">
        <img src="./img/wx.png" alt="">
      </div>
    </div>
  </div>

  <!-- 版权说明 -->
  <div class="cr">
    Copyright © 2015技能树 www.jnshu.com All Rights Reserved | 京ICP备13005880号
  </div>
  </div> 

</body>

</html>
